<template>
	<view class="page">
		<view class="fanhui_box">
			<view class="back_icon_box" @click="goback"></view>
		</view>
		<view class="detail_pic_box">
			<!-- <image :src="mhData.image" mode=""></image> -->
			<image src="https://pockets.qixdian.cn/upload/20240711/668f855f1e084.png" mode="scaleToFill" />
		</view>
		<view class="detail_bg_name_box">
			{{ mhData.name }}
		</view>
		<view class="detail_bg_price_box">
			¥{{ mhData.price }}
		</view>
		<view class="fashu_box">
			<view class="sm_fs_box" v-for="(item, index) in shipList" :key="index" @click="selShip(item)">
				<image v-if="selId == item.id" :src="item.selimg" mode=""></image>
				<image v-else :src="item.img" mode=""></image>
			</view>
		</view>
		<!-- 开箱 -->
		<view class="kaijiang_box" @click="openStart">
			<!-- 1 -->
			<image v-if="selId == 1" src="https://pockets.qixdian.cn/upload/20240711/668f96f4cae03.png" mode="">
			</image>
			<!-- 2 -->
			<image v-else-if="selId == 3" src="https://pockets.qixdian.cn/upload/20240711/668f96f4c73bd.png" mode="">
			</image>
			<!-- 3 -->
			<image v-else src="https://pockets.qixdian.cn/upload/20240711/668f96f4c4969.png" mode=""></image>
		</view>

		<!-- 产出物品 -->
		<view class="chanwu_box">
			<view class="dengji_box">
				<view class="sm_dj_box" :class="'sm_dj_box_' + item.level_id" v-for="(item, index) in gvList"
					:key="index">
					<view class="dj_top_name_box">
						{{ item.level_id == 1 ? '尊贵' : item.level_id == 2 ? '稀有' : item.level_id == 3 ? '史诗' : '传说' }}
					</view>
					<view class="dj_bot_gv_box">
						{{ item.pro }}
					</view>
				</view>
			</view>

			<view class="sm_jp_big_box">
				<view class="sm_jp_box" v-for="(item, index) in shopList" :key="index">
					<view class="sm_jp_top_pic_box">
						<image :src="item.image" mode=""></image>

						<!-- <image src="https://pockets.qixdian.cn/upload/20240711/668f855f1e084.png" mode="scaleToFill" /> -->
					</view>
					<view class="sm_jp_name_box">
						{{ item.title }}
					</view>
					<view class="sm_jp_price_box">
						<text style="font-size: 20rpx;">¥</text>{{ item.price }}
					</view>
				</view>
				<view style="width: 180rpx;"></view>
				<view style="width: 180rpx;"></view>

			</view>
		</view>
		<view class="content" style="height: 750rpx;" v-show="svgaShow">
			<l-svga ref="svga"></l-svga>
		</view>

		<uni-popup ref="pay_popup" type="bottom">
			<view class="pay_order_box">
				<view class="centel_box" @click="cencelBtn">
					<image src="https://pockets.qixdian.cn/upload/20240715/6694b4805fe6a.png" mode="scaleToFill" />
				</view>
				<view class="title_box">
					确认订单
				</view>
				<view class="shopping_box">
					<view class="left_pic_box">
						<image src="https://pockets.qixdian.cn/upload/20240711/668f855f1e084.png" mode="scaleToFill" />
					</view>
					<view class="right_title_box">
						<view class="title_box">
							高爆-时尚潮物盒子 大牌科技
						</view>
						<view class="price_box">¥198.00</view>
					</view>
					<view class="number_box">x3</view>
				</view>
				<view class="dikou_box" v-for="(item, index) in deductionsList" :key="index">
					<view class="dk_left_box">
						<view class="icon_box">
							<image :src="item.icon" mode="scaleToFill" />
						</view>
						<view class="text_name_box">{{ item.text }}</view>
					</view>
					<view class="right_text_box">
						<view class="text_number_box">{{ item.r_text }}</view>
						<view class="jiantou_box" v-if="item.r_icon">
							<image :src="item.r_icon" mode="scaleToFill" />
						</view>
					</view>
				</view>
				<view class="op_mesg_box">{{ opBoxTitle }}</view>
				<view class="agree_box">
					<view class="tyObty_box" @click="agreeBtn">
						<image v-if="protocol" src="https://pockets.qixdian.cn/upload/20240715/6694b480688b6.png"
							mode="scaleToFill" />
						<image v-else src="https://pockets.qixdian.cn/upload/20240715/6694b4806a64c.png"
							mode="scaleToFill" />
					</view>
					<view class="text_box">我已经满18周岁，已阅读并同意 <text style="color: #F56197;"
							@click="memberBtn">《买家须知》</text> </view>
				</view>
				<view style="width: 690rpx;height: 1rpx;margin: auto;background: #E7E7E7;margin-bottom: 12rpx;"></view>
				<view class="zhifu_box">
					<view class="left_heji_box">
						合计：<text>￥990.00</text> </view>
					<view class="right_submit_box" @click="submit">支付</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
export default {
	data() {
		return {
			svgaShow: false,
			shipList: [{
				id: 1,
				img: 'https://pockets.qixdian.cn/upload/20240711/668f96f4a2413.png',
				selimg: 'https://pockets.qixdian.cn/upload/20240711/668f96f4a5a63.png'
			},
			{
				id: 3,
				img: 'https://pockets.qixdian.cn/upload/20240711/668f96f4ab712.png',
				selimg: 'https://pockets.qixdian.cn/upload/20240711/668f96f4b3313.png'
			},
			{
				id: 5,
				img: 'https://pockets.qixdian.cn/upload/20240711/668f96f4a610e.png',
				selimg: 'https://pockets.qixdian.cn/upload/20240711/668f96f4afba6.png'
			},
			],
			selId: 1, //默认：一发入魂
			box_id: '', //盒子id
			mhData: {}, //页面对象
			gvList: [], // 概率列表
			shopList: [], // 奖品列表
			result_audio: null,
			// 抵扣列表
			deductionsList: [
				{
					id: '1',
					icon: 'https://pockets.qixdian.cn/upload/20240715/6694b4807ae63.png',
					l_text: '优惠券',
					r_text: '暂无优惠券',
					r_icon: 'https://pockets.qixdian.cn/upload/20240715/6694b4806e25b.png',
				},
				{
					id: '2',
					icon: 'https://pockets.qixdian.cn/upload/20240715/6694b48064872.png',
					l_text: '金币支付',
					r_text: '50.50',
					r_icon: '',
				},
			],
			opBoxTitle: '开箱说明：盲盒存在概率性，请谨慎购买，未满18周岁未成年人禁止参与',
			protocol: true,// 协议
		}
	},
	onLoad(e) {
		this.box_id = e.id
		this.result_audio = uni.createInnerAudioContext();
		this.result_audio.autoplay = false;
	},
	beforeDestroy() {
		this.result_audio.destroy()
	},
	onShow() {
		this.getData()
	},
	methods: {
		agreeBtn() {
			this.protocol = !this.protocol
		},
		memberBtn(){

		},
		goback() {
			uni.navigateBack()
		},
		antions() {
			this.$refs.svga.render(async (parser, player) => {
				const videoItem = await parser.load("https://pockets.qixdian.cn/img/mp3/mhxq.svga");
				await player.setVideoItem(videoItem);
				// 设置当前动画的循环次数，0代表无限循环 默认 0
				player.loops = 1
				// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit
				player.setContentMode('AspectFill')
				// 开始播放动画，reverse = true 时则反向播放。
				player.startAnimation()
				// 监听动画进度
				player.onFinished(() => {
					console.log('动画结束')
					this.svgaShow = false
					this.getDraw()
				})
			})
		},
		getData() {
			this.$Request.get(this.$api.index.blindBox + `/${this.box_id}`).then(res => {
				this.mhData = res.data.data
				this.gvList = res.data.data.probability
				this.shopList = res.data.data.blind_box_prize
			})
		},
		// 选择发数
		selShip(item) {
			this.selId = item.id
		},
		openStart() {
			this.$refs.pay_popup.open()

		},
		submit() {
			if (!this.svgaShow) {
						this.svgaShow = true
						this.antions()
						this.playVoice('https://pockets.qixdian.cn/img/mp3/kxz.mp3')
						
					}
		},
		getDraw(){
			if (this.protocol) {
				this.$refs.pay_popup.close()
				let params = {
					blind_box_id: this.box_id,
					pay_mode: this.selId,
					multiple: 1,
				}
				this.$Request.post(this.$api.index.blindBoxDraw, params).then(res => {
					if (res.code == 200) {
						uni.navigateTo({ 
							url: '/homes/draw/draw?id=' + res.data.box_order_id
						})
					}
					
					
				})
			} else {
				uni.showToast({
					title: '请先同意协议',
					icon: 'none'
				})
			}
		},
		cencelBtn() {
			this.$refs.pay_popup.close()
		},
		playVoice(url) {
			if (url) {
				this.lastRecord = url; // 将路径赋值给定义的变量好做判断
				this.result_audio.src = url; // 配置音频播放路径
				this.result_audio.play(); // 播放
				this.result_audio.loop = false // 是否循环播放
			}
		},
	}
}
</script>

<style lang="scss" scoped>
/deep/.uni-popup__wrapper-box {
	padding: 0 !important;
}

.page {
	width: 100vw;
	height: 2200rpx;
	background-image: url('https://pockets.qixdian.cn/upload/20240711/668f96249ff15.png');
	background-size: 100% 100%;
	box-sizing: border-box;
	padding-top: 113rpx;
	position: relative;

	// svga
	.content {
		width: 750rpx;
		height: 750rpx;
		// background-color: #fff;
		position: fixed;
		top: 400rpx;

	}

	.fanhui_box {
		width: 100%;
		height: 39rpx;
		box-sizing: border-box;
		padding-left: 39rpx;
		margin-bottom: 35rpx;

		.back_icon_box {
			width: 60rpx;
			height: 39rpx;
			background-image: url('https://pockets.qixdian.cn/upload/20240711/668f855ee8137.png');
			background-size: 100% 100%;
		}
	}

	.detail_pic_box {
		width: 380rpx;
		height: 380rpx;
		background-image: url('https://pockets.qixdian.cn/upload/20240711/668f962470015.png');
		background-size: 100% 100%;
		margin: auto;
		margin-bottom: 69rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 90%;
			height: 90%;
		}
	}

	.detail_bg_name_box {
		width: 664rpx;
		height: 47rpx;
		background-image: url('https://pockets.qixdian.cn/upload/20240711/668f96f4b2c49.png');
		background-size: 100% 100%;
		margin: auto;
		text-align: center;
		line-height: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 50rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 24rpx;
	}

	.detail_bg_price_box {
		width: 100%;
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #F56198;
		margin-bottom: 40rpx;
	}

	.fashu_box {
		width: 100%;
		height: 68rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 65rpx;
		margin-bottom: 55rpx;

		.sm_fs_box {
			width: 90rpx;
			height: 68rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.kaijiang_box {
		width: 612rpx;
		height: 146rpx;
		margin: auto;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
			transition: transform .8s ease;
		}

		image:active {
			transform: scale(0.8)
		}
	}

	.chanwu_box {
		width: 690rpx;
		height: 998rpx;
		background-image: url('https://pockets.qixdian.cn/upload/20240711/668f96249af74.png');
		background-size: 100% 100%;
		margin: auto;
		box-sizing: border-box;
		padding-top: 82rpx;

		.dengji_box {
			width: 100%;
			height: 45rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding-right: 35rpx;
			padding-left: 68rpx;
			margin-bottom: 28rpx;

			.sm_dj_box {
				width: 90rpx;
				height: 45rpx;

				&.sm_dj_box_1 {
					color: #2AF5FC;
				}

				&.sm_dj_box_2 {
					color: #43C2FD;
				}

				&.sm_dj_box_3 {
					color: #BD7DFF;
				}

				&.sm_dj_box_4 {
					color: #FFCB3E;
				}

				.dj_top_name_box {
					width: 100%;
					height: 24rpx;
					text-align: center;
					line-height: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}

				.dj_bot_gv_box {
					width: 100%;
					height: 24rpx;
					text-align: center;
					line-height: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
				}
			}
		}

		.sm_jp_big_box {
			width: 100%;
			height: 796rpx;
			box-sizing: border-box;
			padding: 0 38rpx 0 41rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			overflow: hidden;
			overflow-y: auto;

			.sm_jp_box {
				width: 180rpx;
				height: 242rpx;
				margin-bottom: 30rpx;
				flex-shrink: 0;

				.sm_jp_top_pic_box {
					width: 180rpx;
					height: 180rpx;
					background-image: url('https://pockets.qixdian.cn/upload/20240711/668f962470014.png');
					background-size: 100% 100%;
					margin-bottom: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 90%;
						height: 90%;
						border-radius: 10rpx;
					}


				}

				.sm_jp_name_box {
					width: 176rpx;
					height: 21rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 21rpx;
					margin: auto;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 9rpx;
				}

				.sm_jp_price_box {
					width: 176rpx;
					height: 22rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #F56198;
					line-height: 22rpx;
					text-align: center;
				}
			}
		}
	}

	.pay_order_box {
		width: 100%;
		height: 720rpx;
		background: #030524;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		box-sizing: border-box;
		position: relative;
		padding: 0 30rpx;
		padding-top: 46rpx;

		.centel_box {
			position: absolute;
			width: 25rpx;
			height: 24rpx;
			right: 40rpx;
			top: 50rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title_box {
			width: 100%;
			height: 31rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 42rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.shopping_box {
			width: 100%;
			height: 160rpx;
			display: flex;
			justify-self: flex-start;
			position: relative;
			margin-bottom: 46rpx;

			.left_pic_box {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.right_title_box {
				width: 500rpx;
				height: 160rpx;
				margin-left: 20rpx;

				.title_box {
					width: 370rpx;
					height: 92rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					margin-bottom: 34rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					// 控制行数
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.price_box {
					height: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #F56198;
					line-height: 18rpx;
				}
			}

			.number_box {
				position: absolute;
				right: 15rpx;
				top: 10rpx;
				height: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}

		.dikou_box {
			width: 100%;
			height: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 34rpx;

			.dk_left_box {
				width: 50%;
				height: 36rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.icon_box {
					width: 40rpx;
					height: 36rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text_name_box {
					height: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}
			}

			.right_text_box {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.text_number_box {
					height: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 36rpx;
				}

				.jiantou_box {
					width: 16rpx;
					height: 28rpx;
					margin-left: 16rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.op_mesg_box {
			height: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #AFAFAF;
			line-height: 30rpx;
			width: 100%;
			margin-bottom: 30rpx;

		}

		.agree_box {
			width: 100%;
			height: 30rpx;
			display: flex;
			justify-content: flex-start;
			// align-items: center;
			margin-bottom: 30rpx;

			.tyObty_box {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;


				image {
					width: 100%;
					height: 100%;
				}
			}

			.text_box {
				height: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #AFAFAF;
				line-height: 30rpx;
			}
		}

		.zhifu_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left_heji_box {
				width: 50%;
				height: 80rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 80rpx;

				text {
					font-weight: 500;
					font-size: 36rpx;
					color: #F56197;
				}
			}

			.right_submit_box {
				width: 240rpx;
				height: 80rpx;
				background: linear-gradient(-45deg, #529BFF, #457DFF);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
}
</style>